<template>
	<view class="scenceIndex">
<!-- 	<view class="concern">


		<view class="concernLeft">
			<image src="../../static/img/s3.png" style="width: 200upx;height: 180upx;" class="hotelImg"></image>
		</view>
		<view class="concernRight">
			<text class="hoteltxt">热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店</text>
			<text class="concernNum">5.4人收藏</text>
		</view>
		
	</view> -->

		<view id="cover"  @click="isCover" v-if="isShow">
					<view class="changeCityList">
					<text class="changeCityListItem" v-for="item in changeCityList" @click="selectCity(item.name)">
							{{item.name}}
					</text>
			</view>
		</view>


		<view class="scenceIndexSearch">
				<view class="">
					<image src="../../static/img/icon_home_search.png" style="width: 30upx;height: 32upx;position: absolute;top: 60upx;left: 64upx;" class=""></image>
						<input class="uni-input SearchInput" v-model="searchCityName" placeholder="" />
						<text class="" style="position: absolute;top: 55upx;right: 70upx;color: #2B91E2;z-index: 22;" @click="searchCity">搜索</text>
				</view>
<!-- 				<view class="" style="position: absolute;top: 60upx;right: 20upx;" @click="changeCity">
					<image src="../../static/img/icon_scence_more.png" style="width: 20upx;height: 10upx;margin-right: 10upx;" class=""></image>
						{{parentDate.name}}
				</view> -->
		</view>
		<view class="">
			<view class="cityListTitle">
					当季推荐
			</view>
			<view class="cityList">
				<view class="cityListItem" v-for="item in cityList">
					<image :src="item.variousImg" style="width: 700upx;height: 400upx;" class="noDataImg"></image>
					<view class="cityListItemBom">
						<view class="cityListItemName">
								{{item.variousName}}
						</view>
<!-- 						<view class="">
								{{item.pageviews}}浏览
						</view> -->
<!-- 						<view class="deliciousListTag">
							<view class="deliciousListTagItem" v-for="(child, _index1) in item.promptLabel" v-if="child != ''" :key="_index1">
								{{child}}
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="fz15 h-c tab-wrapper">
				<view class="inline-block tab" :class="tabVal == 0 ? 'active' : ''" @click="changetab(0)">综合排序</view>
				<view class=""style="border-right: 1px solid #e6e6e6;height: 35upx;"></view>
				<view class="inline-block tab" :class="tabVal == 1 ? 'active' : ''" @click="changetab(1)">推荐度</view>
			</view>
			<view class="sortList" v-for="item in sortList">

					<view class="sortListLeft">
						<image class="img" :src="item.businessImg" style="width: 280upx;height: 230upx;margin: 10upx 34upx 0 34upx;"></image>
					</view>
					<view class="sortListRight">
						<view class="sortListItemName">
							{{item.businessName}}
						</view>
<!-- 						<view class="sortListItemName">
							{{item.businessLabel}}
						</view> -->
						<view class="deliciousListTag">
							<view class="deliciousListTagItem" v-for="(child, _index1) in item.businessLabel" v-if="child != ''" :key="_index1">
								{{child}}
							</view>
						</view>
						<view class="sortListItemNum">
							<text class="">
							<text class="fw-bold">{{item.browseNum}}</text>
							浏览</text>
							<text class="" style="margin-left: 20upx;">
							<text class="fw-bold">{{item.recommendNum}}</text>
							人推荐
							</text>
						</view>

<!-- 						<view class="sortListItemAdr">
							<text class="" style="font-size: 30upx;font-weight: bold;">推荐餐厅:</text>
							{{item.ownRestaurantName}}
						</view> -->
					</view>

			</view>
			<view class="fz14 tc h-8 signtips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		onLoad: function(option) {
			console.log(option, '==========');
			this.parentDate = JSON.parse(option.item)
		},
		data() {
			return {
				parentDate: '',
				tabVal:0,
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false,
				sortList:[],
				cityList:[],
				changeCityList:[],
				searchCityName:'',
				isShow:false
			}
		},
		components: {
			Header
		},

		onShow() {
			this.getSort();
			this.getData()
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.changetab(this.tabVal, true)
			}
		},
		methods: {
			searchCity(){
				console.log('0000')
				this.getData()
			},
			isCover(){
				this.isShow = false;
			},
			selectCity(name){
				console.log(name)
				this.parentDate.name = name;
				this.getData();
				this.isShow = false;
				document.body.style.overflow="auto";
			},
// 			changeCity(){
// 				this.isShow = true;
// 				document.body.style.overflow="hidden";
// 				console.log(this.isShow)
// 				this.getCity()
// 			},
			//获取数据
			getCity() {
				this.$postApi(this.$path.GET_CITY_LIST, {
					parentId: "14000",
				}).then(data => {
					if (data.data.success) {
						this.changeCityList = data.data.reListData;
					}
				})
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_BUSINESS_LIST, {
					businessType: '',
					businessId: '',
					businessName: this.searchCityName,
					page: this.page,
					rows: 8,
					addressCity: '',
					descType: this.tabVal
				}).then(data => {
					if (data.data.success) {
						console.log(data,'1111')
						if(data.data.rows.length == 0 && this.page==1){
							this.sortList = []
						}
						if (data.data.rows.length !== 0) {
							for (let i = 0; i < data.data.rows.length; i++) {
								// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
								data.data.rows[i].businessLabel = data.data.rows[i].businessLabel.split("；");
							}
							if (this.page == 1) {
								this.sortList = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.sortList = this.sortList.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
						// this.sortList = data.data.rows
// 						for (let i = 0; i < data.data.rows.length; i++) {
// 							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
// 							data.data.rows[i].businessLabel = data.data.rows[i].businessLabel.split("；");
// 						}
					}
				})
			},
			//获取数据
			getSort() {
				this.$postApi(this.$path.QUERY_SHOW_CHILD_INFO,{positionId:9}).then(data => {
					if (data.data.success) {
						console.log(data,'22')
						
// 						for (let i = 0; i < data.data.items.length; i++) {
// 							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
// 							data.data.items[i].promptLabel = data.data.items[i].promptLabel.split("；");
// 						}
						this.cityList = data.data.items
						// this.sortList = data.data.rows
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changetab(val, isPush) {
				if (!isPush) {
					this.tabVal = val
					
					this.page = 1
				}
				this.getData()
// 				switch (this.tabVal) {
// 					case 0:
// 						this.searchSpotByC()
// 						break;
// 					case 1:
// 						this.searchHotelByC()
// 						break;
// 					case 2:
// 						this.getOrderList()
// 						break;
// 					default:
// 						break;
// 				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	#cover{ 
		position:absolute;left:0px;top:0px;
		background-color:#000;
		background: rgba(0, 0, 0, 0.5);
		width:100%; 
		height:100%;
		// filter:alpha(opacity=60);   
		// display:none; 
		z-Index:20;  
		.changeCityList{
			// position:absolute;left:0px;top:0px;
			background-color:white;
			width:100%; 
			height: 200upx;
			opacity:1;
			z-Index:21; 
			// display: flex;
			// filter:alpha(opacity=0); 
			.changeCityListItem{
				border: 1upx solid #16BF5A;
				color: #16BF5A;
				word-wrap:break-all;
				margin: 20upx;
				margin-top: 10upx;
				padding: 5upx;
				display: inline-block;
			}
		}
	}
	.scenceIndexSearch{
		position: fixed;
		top: 50upx;
		width: 100%;
		height: 130upx;
		// padding-bottom: 50upx;
		z-index: 10;
		background: white;
		.SearchInput{
			padding-left: 50upx;
			width: 650upx;
			box-sizing: border-box;
			box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			margin: 50upx;
		}
	}
	.cityListTitle{
		font-size: 36upx;
		font-weight: bold;
		margin: 120upx 10upx 20upx 10upx;
	}
.cityList{
	display: flex;
	overflow-x: scroll;
	.cityListItem{
		// display: flex;
		// flex-direction: column;
		margin: 10upx;
		// padding: 0upx 34upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
		border-radius: 10upx;
		// height: 235upx;
		box-sizing: border-box;
		.cityListItemBom{
			margin: 10upx;
			padding-bottom: 20upx;
				.cityListItemName{
				font-size: 36upx;
				font-weight: bold;
			}
		}
	
	}
}
.sortList{
	display: flex;
	width: 100%;
	padding: 34upx;
	border-bottom: 1px solid #cccccc;
	.sortListRight{
		width: 100%
	}
	.sortListItemName{
		font-size: 36upx;
		font-weight: bold;
		margin: 10upx;
	}
	.sortListItemNum{
		// font-weight: bold;
		margin: 10upx;
		margin-top: 80upx;
	}
	.sortListItemAdr{
		margin: 10upx 10upx 20upx 10upx;
	}
	.sortListItemTicket{
		margin: 10upx;
		padding-top: 20upx;
		border-top:1upx dashed #cccccc;
		display: flex;
		justify-content: space-between;
		.sortListItemTicketPrice{
			color: #FE5A34;
		}
	}
}
.deliciousListTag {
						display: flex;
						margin-bottom: 10upx;
						margin-left: 10upx;
							
						.deliciousListTagItem {
							border: 1upx solid rgba(255, 180, 21, 1);
							border-radius: 4upx;
							font-size: 20upx;
							font-weight: 400;
							color: rgba(255, 180, 21, 1);
							padding: 6upx 12upx;
							margin-right: 14upx;
						}
					}
.tab-wrapper {
			display: flex;
			justify-content: space-around;
			padding: 20upx 40upx 0upx;
			margin-bottom: 20upx;
			// padding-bottom: 30upx;
			border-bottom: 1upx solid #e6e6e6;
			.tab {
				padding-bottom: 12upx;
				border-bottom: 4upx solid transparent;

				&.active {
					border-bottom-color: #2B91E2;
				}
			}
		}
</style>
